<template>
  <div class="map-container">
    <div id="map"></div>
    <div class="btn-wrap">
      <button @click="loadGeojson">加载10w geojson</button>
      <button @click="clearGeojson">清空geojson</button> <br />
      <button @click="loadGeojson_30w">加载30w geojson</button>
      <button @click="clearGeojson_30w">清空30w geojson</button> <br />
      <button @click="loadSuzhou">加载苏州行政区划</button>
      <button @click="clearSuzhou">清空苏州行政区划</button>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import maplibregl from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'
import MapboxDraw from '@mapbox/mapbox-gl-draw'
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'

let map = null

//天地图
let vecUrl = 'http://t0.tianditu.com/vec_w/wmts?tk=72d5cb5710cf5292d787787ddc170069'
let cvaUrl = 'http://t0.tianditu.com/cva_w/wmts?tk=72d5cb5710cf5292d787787ddc170069'
let tdtVec = {
  //类型为栅格瓦片
  type: 'raster',
  tiles: [
    //请求地址
    vecUrl + '&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles',
  ],
  //分辨率
  tileSize: 256,
}
let tdtCva = {
  type: 'raster',
  tiles: [cvaUrl + '&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'],
  tileSize: 256,
}

const initMap = () => {
  map = new maplibregl.Map({
    container: 'map',
    style: {
      version: 8,
      sources: {
        tdtVec: tdtVec,
        tdtCva: tdtCva,
      },
      layers: [
        {
          //图层id，要保证唯一性
          id: 'tdtVec',
          //图层类型
          type: 'raster',
          //数据源
          source: 'tdtVec',
          //图层最小缩放级数
          minzoom: 6,
          //图层最大缩放级数
          maxzoom: 17,
        },
        {
          id: 'tdtCva',
          type: 'raster',
          source: 'tdtCva',
          minzoom: 6,
          maxzoom: 17,
        },
      ],
    },
    center: [120.476858, 31.358201],
    zoom: 13,
  })
  var Draw = new MapboxDraw({
    displayControlsDefault: false,
    // 绘制多边形
    controls: {
      polygon: true,
      trash: true,
    },
    // 绘制多边形
    defaultMode: 'draw_polygon',
  })
  map.addControl(Draw, 'top-right')
}

// geojson加载点
const loadGeojson = () => {
  fetch('http://localhost:3000/json/geojson_data.json')
    .then((response) => response.json())
    .then((data) => {
      // console.log(data)
      if (!map.getSource('geojson')) {
        map.addSource('geojson', {
          type: 'geojson',
          data: data,
        })
      }

      map.addLayer({
        id: 'geojson',
        type: 'circle',
        source: 'geojson',
        paint: {
          'circle-color': '#007cbf',
          'circle-radius': 4,
          'circle-stroke-width': 1,
          'circle-stroke-color': '#fff',
        },
      })
    })
}

// 清空地图点
const clearGeojson = () => {
  map.removeLayer('geojson')
}

// 加载30w geojson
const loadGeojson_30w = () => {
  fetch('http://localhost:3000/json/geojson_data_30w.json')
    .then((response) => response.json())
    .then((data) => {
      // console.log(data)
      if (!map.getSource('geojson_30w')) {
        map.addSource('geojson_30w', {
          type: 'geojson',
          data: data,
        })
      }

      map.addLayer({
        id: 'geojson_30w',
        type: 'circle',
        source: 'geojson_30w',
        paint: {
          'circle-color': '#007cbf',
          'circle-radius': 4,
          'circle-stroke-width': 1,
          'circle-stroke-color': '#fff',
        },
      })
    })
}

// 清空30w geojson
const clearGeojson_30w = () => {
  map.removeLayer('geojson_30w')
}

// 加载苏州行政区划
const loadSuzhou = () => {
  fetch('http://localhost:3000/json/suzhou_xzqh.json')
    .then((response) => response.json())
    .then((data) => {
      // 添加线
      map.addSource('szs-lunkuo', {
        type: 'geojson',
        data: data,
      })
      map.addLayer({
        id: 'szs-lunkuo',
        type: 'line',
        source: 'szs-lunkuo',
        paint: {
          'line-color': '#0fe0e7',
          'line-width': 5,
        },
      })
    })
}
// 清空苏州行政区划
const clearSuzhou = () => {
  map.removeLayer('szs-lunkuo')
  map.removeSource('szs-lunkuo')
}

onMounted(() => {
  initMap()
})
</script>

<style scoped lang="less">
.map-container {
  width: 100%;
  height: 100%;
  position: relative;
  #map {
    width: 100%;
    height: 100%;
  }
  .btn-wrap {
    position: absolute;
    top: 10px;
    right: 50px;
  }
  .btn-wrap button {
    padding: 3px 6px;
    background-color: #007cbf;
    color: #fff;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>
